<template>
     <h3>watch侦听器</h3>
     <div>{{num}}</div>
     <div>{{str1}}---{{str2}}</div>
     <button @click="changeNum"> add</button>
     <button @click="changeStr"> str</button>
     <hr>
     <div>obj:{{obj}}</div>
     <button @click="changeobj">modify</button>

     <hr>
     <h4>watchEffect高级侦听器</h4>
     <div>{{string}}---{{count}}</div>
     <button @click="changeStr3">change</button>
</template>
    
<script setup lang='ts'>
import { reactive, Ref, ref, watch, watchEffect } from 'vue';
// 监听Ref 案例
let num:Ref<number> = ref(1);
watch(num, function(newValue, oldValue) {
    if (newValue > 10) alert('不能大于10')
    console.log('watch--单个：', newValue, oldValue)
});
let changeNum = function() {
    num.value++
    // console.log('changeNum:', num);
};




// 监听多个ref 注意变成数组
let str1 = ref('');
let str2 = ref('');
watch([str1, str2], (newVal, oldVal) => {
    if (newVal[0].length > 5 || newVal[1].length > 5) {
        alert('length>5');
    }
    console.log('ref 注意变成数组:',newVal, oldVal);
}, {
    deep: true,
    immediate: true
});
let changeStr = () => {
    str1.value += '!';
    str2.value += '?';
    console.log('changeStr')
};



// 监听Reactive
// 使用reactive监听深层对象开启和不开启deep 效果一样

let obj = reactive({
    age: 10,
    name: {
        firstName: 'zhang',
        lastName: 'san'
    }
});

watch(obj, (newVal, oldVal) => {
    console.log('obj---watch:', newVal, oldVal);
});

const changeobj = function() {
    obj.age ++;
    obj.name.firstName += '!!';
};


// watchEffect高级侦听器
// 立即执行传入的一个函数，只要在中国函数中用到的数据都会自动监听，不需要指定
// 会自动立即执行一次

// options

// { flush: "pre" | "post" | "sync"}

// 选项参数可以决定handler执行的时机

// pre 在组件更新之前操作

// post 在组件更新完成之后操作

// sync 同步操作
let string = ref('');
let count = ref(0);
// 停止跟踪 watchEffect 返回一个函数 调用之后将停止更新
let stop = watchEffect((onInvalidate) => {
    // 清除副作用 就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖
    onInvalidate(()=> {
        console.log('副作用会最先执行');
    });
    console.log('watchEffect:', string.value, count.value);
}, {
    flush: 'post',
    // onTrigger  可以帮助我们调试 watchEffect
    onTrigger() {
        // debugger
    }
});


let changeStr3 = function (){
    string.value += '!';
    count.value++;
    (string.value.length > 5 || count.value > 5) && stop();
}

</script>
    
<style>
</style>